<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        table{      
    		margin:0 auto;      //使整个计算器的界面位于网页中央 
    	}.but_ac{
    		width: 80px;
    		height: 60px;
    		background-color : lightgray;  //设置按钮的背景颜色为浅灰色
    		font-size: 1.2em;              //设置字体大小
    	}
    	.but{
    		width: 80px;
    		height: 60px;
    		background-color : lightgray;
    		font-size: 1.2em;
    	}
    	.screen{
    		    width: 350px;
            height: 70px;
            font-size: 1.5em;
            color: white;
            background-color: black;
            text-align:right;       //使用户输入的表达数从屏幕的右边开始显示
    	}
        .container{
            margin:0 auto;
            display: grid;
            width: 350px;
            height: 550px;
            grid-template-columns:repeat(4,25%);
            grid-template-rows:repeat(8,12.5%);
            background-color:lightgray;
            margin-top: 50px;
            text-align: center;
            line-height: 68.75px;
            font-size: 1.5em;
        
        }
        #screen{
            grid-column: 1/5;
            grid-row: 1/3;
            background-color: black;
        }
        #mc{
            grid-column: 1/2;
            grid-row: 3/4;
            border:solid 1px  gray;
            border-left: 0px;
            font-size: 1.1em;
            background-color:lightgray;
        }
        #m1{
            grid-column: 2/3;
            grid-row: 3/4;
            border:solid 1px  gray;
            border-left: 0px;
        }
        #m-{
            grid-column:3/4;
            grid-row: 3/4;
            border:solid 1px  gray;
            border-left: 0px;
        }
        #mr{
            grid-column: 4/5;
            grid-row: 3/4;
            border:solid 1px  gray;
            border-right: 0px;
            border-left: 0px;

        }
        #ac{
            grid-column:1/2;
            grid-row: 4/5;
            border:solid 1px  gray;
            border-left: 0px;
            color: orange;
            border-top: 0px;
        }

        #delete{
            grid-column:2/3;
            grid-row: 4/5;
            border:solid 1px  gray;
            border-left: 0px;
            color: orange;
            border-top: 0px;
        }
        #bracket{
            grid-column:3/4;
            grid-row: 4/5;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #chu{
            grid-column:4/5;
                grid-row: 4/5;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
                border-right: 0px;
            
        }
        #num7{
            grid-column:1/2;
            grid-row: 5/6;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #num8{
            grid-column:2/3;
            grid-row: 5/6;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #num9{
            grid-column:3/4;
            grid-row: 5/6;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #cheng{
            grid-column:4/5;
            grid-row: 5/6;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
                border-right: 0px;
        }
        #num4{
            grid-column:1/2;
            grid-row: 6/7;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #num5{
            grid-column:2/3;
            grid-row: 6/7;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #num6{
            grid-column:3/4;
            grid-row: 6/7;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #minus{
            grid-column:4/5;
            grid-row: 6/7;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
                border-right: 0px;
        }
        #num1{
            grid-column:1/2;
            grid-row: 7/8;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #num2{
            grid-column:2/3;
            grid-row: 7/8;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #num3{
            grid-column:3/4;
            grid-row: 7/8;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }

        #add{
            grid-column:4/5;
            grid-row: 7/8;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
                border-right: 0px;
        }
        #num0{
            grid-column:1/3;
            grid-row: 8/9;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;

        }
        #spot{	grid-column:3/4;
            grid-row: 8/9;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
        }
        #equal{
            grid-column:4/5;
            grid-row: 8/9;
            border:solid 1px  gray;
            border-left: 0px;
            border-top: 0px;
            border-right: 0px;
            color: white;
            background-color: orange;
            
    </style>
    <script type="text/javascript">
        window.onload=function(){         
        var num=document.getElementsByClassName("but");
        var NUM1 = document.getElementById  //num数组存放元素对象
        var scr=document.getElementsByClassName("screen")[0]; //获取屏幕对象
        for(var i=0;i<num.length;i++)    //通过for循环为每个按钮添加onclick事件
        {
        num[i].onclick=function(){   
        if(this.value=="AC"){       //如果点击AC，则清空屏幕
                scr.value="";
            }
        else if( this.value=="+/-"){  //如果点击“+/-”按钮有两种情况
            //第一种情况，如果此时屏幕为空，则什么也不显示
            if(scr.value==""){      
                    scr.value="";
                }
            //如果屏幕不为空，就判断最后两个元素是不是运算符加数字的结构
                else if(isNaN(scr.value.charAt(scr.value.length-  1))==false&&isNaN(scr.value.charAt(scr.value.length-2))==true)
                {
            //给最后一个数字加括号并变为负数 
            scr.value=scr.value.substr(0,scr.value.length-1)+"("+"-"+scr.value.charAt(scr.value.length-1)+")";
                }  
        }  
            //当屏幕不为空时，判断点击的是不是退格键
        else if (this.value=="<—"&&this.value!=""){     
            //将最后一个元素截掉
                scr.value=scr.value.substr(0,scr.value.length-1);
        }
            //当屏幕为空时判断是否点击的是小数点
            else if(scr.value==""&&this.value=="."){
                scr.value="0.";
        }
            //当点击等于号时，用eval函数计算表达式的结果并显示到屏幕上
        else if(this.value=="="){
                scr.value=eval(scr.value); 
        }
            //当屏幕为空时，点击+、-、*、/时不做反应
        else if(scr.value==""&&(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/"))
        {
            scr.value=="";
        }
        else{
                    scr.value+=this.value;
        }
            }
            }
        } 
    </script>
</head>
<body>
    <div class="container">
        <table>
            <tr>
                <td colspan="4">
                    <input class="screen" type="text" disabled />
                </td>
            </tr>
            <tr>
                <td><input class="but_ac but" type="button" value="AC" style="color: orange"></td>
                <td><input class="but_ac but" type="button" value="<—" style="color: orange"></td>
                <td><input class="but" type="button" value="+/-"></td>
                <td><input class="but" type="button" value="/"></td>
            </tr>
            <tr>
                <td><input class="but" type="button" value="7"></td>
                <td><input class="but" type="button" value="8"></td>
                <td><input class="but" type="button" value="9"></td>
                <td><input class="but" type="button" value="*"></td>  
            </tr>
            <tr>
                <td><input class="but" type="button" value="4"></td>
                <td><input class="but" type="button" value="5"></td>
                <td><input class="but" type="button" value="6"></td>
                <td><input class="but" type="button" value="-"></td>
            </tr>
            <tr>
                <td><input class="but" type="button" value="1"></td>
                <td><input class="but" type="button" value="2"></td>
                <td><input class="but" type="button" value="3"></td>
                <td><input class="but" type="button" value="+"></td>
            </tr>
            <tr>
                <td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td>
                <td><input class="but" type="button" value="."></td>
                <td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td>
            </tr>
      </table>
    </div>
</body>
</html>